---
import { render } from 'astro:content';
import Entry from '@eratic/core/layouts/Entry.astro';
import { mdxComponents } from '@eratic/core/components/mdx';
import LinkList from '../components/LinkList.astro';
import { allIssues, issuePath, issueTitle, groupLinks } from '../lib/entries';

export async function getStaticPaths() {
	const issues = await allIssues();
	return issues.map((entry) => ({
		params: { slug: entry.id },
		props: { entry },
	}));
}

const { entry } = Astro.props;
const { Content } = await render(entry);
const groups = groupLinks(entry);
const count = entry.data.links.length;
---

<Entry
	site="io"
	title={issueTitle(entry)}
	summary={entry.data.summary}
	path={issuePath(entry)}
	pubDate={entry.data.pubDate}
	updatedDate={entry.data.updatedDate}
	tags={entry.data.tags}
	canvas={entry.data.canvas}
	theme={entry.data.theme}
	kicker={`${count} thing${count === 1 ? '' : 's'}`}
>
	<Content components={mdxComponents} />
	<LinkList groups={groups} />
</Entry>